import React, { Component } from 'react'

//withRouter 高阶组件注入路由特性
import { withRouter } from 'react-router-dom'
import './tabbar.css'

function withTabbar(WrappedComponent) {
  class Tabbar extends Component {
    state = {
      activeTab: '/'
    }
    handleGoTo = (path)=> {
      this.props.history.push(path)
      this.setState({
        activeTab: path
      })
    }
    componentDidMount() {
      console.log(this.props.location)
      this.setState({
        activeTab: this.props.location.pathname
      })
    }
    render() {
      console.log(this.props)
      return (
        <div className="tabbar">
          <div className="tabbar-content">
            <WrappedComponent></WrappedComponent>
          </div>
          <div className="tabbar-bottom">
          <div className={this.state.activeTab==="/"?"tabbar-bottom-item active":"tabbar-bottom-item"} onClick={this.handleGoTo.bind(this,'/')}>主页</div>
            <div className={this.state.activeTab==="/user"?"tabbar-bottom-item active":"tabbar-bottom-item"} onClick={this.handleGoTo.bind(this,'/user')}>用户</div>
            <div className={this.state.activeTab==="/about"?"tabbar-bottom-item active":"tabbar-bottom-item"} onClick={this.handleGoTo.bind(this,'/about')}>关于</div>
          </div>
        </div>
      )
    }
  }
  return withRouter(Tabbar)
}

export { withTabbar }